<script setup>
import { reactive,onMounted,ref,computed } from 'vue'
import MostHeader from '@/components/MostHeader.vue';
import { CaretRightOutlined } from '@ant-design/icons-vue'
import HotJobsCard from "@/views/companyInfo/components/HotJobsCard.vue";
import {message} from 'ant-design-vue'
import {getCompanyInfoById, getCompanyJobList} from "@/api/company.js";
import { useRoute } from 'vue-router'
import router from "@/router/router.js";

//接受参数
const route = useRoute()
const companyId = ref(route.query.companyId)
const logo = ref('')
const companyInfo = ref();
const jobs = ref([])
const jobsValue = ref('')

onMounted(async () => {
    const res = await getCompanyInfoById({ companyId: companyId.value })
    await getCompanyJobs()
    logo.value = res.data.data.logo
    if(res.data.code===200){
      companyInfo.value = res.data.data
    }else {
      message.error(res.data.message)
    }
});

// 计算属性，将 \n 转换成 <br>
const formattedDescription = computed(() => {
  if (companyInfo.value?.description) {
    return companyInfo.value?.description.replace(/\n/g, '<br>');
  }
  return '';
});

// 计算属性，将 \n 转换成 <br>
const formattedCulture = computed(() => {
  if (companyInfo.value?.culture) {
    return companyInfo.value?.culture.replace(/\n/g, '<br>');
  }
  return '';
});

//获取公司所有岗位
const getCompanyJobs = async () => {
  try {
    const res = await getCompanyJobList({ companyId: companyId.value })
    if(res.data.code===200){
      jobsValue.value = res.data.data.length
      jobs.value = res.data.data.slice(0, 3)
    }else {
      throw new Error('获取公司岗位失败');
    }
  } catch (err) {
    message.error(err.message);
  }
}

//跳转到公司信息列表
const allJobs = () => {
  router.push({
    name: 'jobInfoDisplay',
    query: {
      keyword: companyInfo.value.companyName,
      loc: ''
    }
  })
}
</script>

<template>
  <div class="base">
      <MostHeader />
    <div class="company-page-container">
      <a-layout-header class="company-page-header">
        <div class="company-info">
          <a-space>
            <div class="company-logo">
              <a-image :width="80" :src="logo" :preview="false" alt="公司logo" />
            </div>
            <div class="left-container">
              <div class="company-info-title">
                <span>{{companyInfo?.companyName}}</span>
              </div>
              <div class="company-stats">
                <span>{{companyInfo?.city}}</span>
              </div>
            </div>
          </a-space>
          <div class="right-container">
            <div class="company-recruit">
              <span>{{jobsValue.value}}</span>在招职位
            </div>
          </div>
        </div>
      </a-layout-header>
      <div class="main-container">
        <a-layout class="company-page">
          <a-layout-content class="content">
            <!-- 热招职位 -->
            <section class="hot-jobs">
              <div class="hot-jobs-all">
                <span>热招职位</span>
                <span
                    style="color: #00bebd;font-weight:400;font-size:14px;cursor: pointer"
                      @click="allJobs">
                  查看全部岗位
                  <CaretRightOutlined style="color:#00bebd" />
                </span>
              </div>
              <div class="hot-jobs-container">
                <a-row gutter="16">
                  <a-col v-for="job in jobs" :key="job.jobId" :span="8">
                    <HotJobsCard
                        :title="job?.title"
                        :salary="job?.salary"
                        :location="job?.area"
                        :experience="job?.description"
                        :qualifications="job?.tag" />
                  </a-col>
                </a-row>
              </div>
            </section>
            <section class="company-intro">
              <h2>公司简介</h2>
              <div class="job-description" v-html="formattedDescription"></div>
            </section>

            <section class="company-album">
              <h2>公司文化</h2>
              <div class="job-description" v-html="formattedCulture"></div>
            </section>
          </a-layout-content>
        </a-layout>
      </div>
    </div>
  </div>
</template>

<style scoped>
.base {
  background-color: #e0f2f5;
  width: 100%;
  height: 100%;
  position: absolute;
}

.main-container {
  width: 1135px;
  padding: 10px 20px;
  margin: 0 auto;
}

.company-page-container {
  width: 100%;
  overflow: scroll;
  position: relative;
  height: 900px;
}

.hot-jobs-container {
  padding: 10px;
  border-radius: 10px
}

.company-page {
  background: #f0f2f5;
  border-radius: 10px;
}

.company-page-header {
  display: flex;
  padding: 10px;
  background: white;
  border-bottom: 1px solid #eee;
}

.company-logo {
  display: flex;
  width: 80px;
  height: 100%;
  align-items: center;
}

.company-info {
  margin: 20px auto;
  display: flex;
  width: 1080px;
  justify-content: space-between;
}

.company-info-title {
  margin-bottom: 10px;

  >span {
    font-size: 28px;
    font-weight: 600
  }
}

.left-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.right-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.company-recruit {
  margin: 10px 20px 0;

  >span {
    font-size: 40px;
    color: #00bebd;
    font-weight: 400;
    margin-right: 10px;
  }
}

.content {
  padding: 24px 48px;
  background: #f9f9f9;
}

section {
  margin-bottom: 24px;
}

.hot-jobs-all {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
  display: flex;
  justify-content: space-between;
}

.company-intro h2,
.company-album h2,
.work-benefits h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
}

.company-album img {
  width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.work-benefits ul {
  padding-left: 20px;
  list-style-type: disc;
  line-height: 1.6;
}
</style>